<template>
  <view>
    <view class="padding-top">
		<view v-for="(item,i) in message.channelsArr" :key="i"  class="cu-list menu card-menu sm-border borders" @tap="jumpBuy(item)">
			<view class="cu-item bg-white devices">
				<view class="content padding-tb-sm">
					<!-- 通道 -->
					<view>
						{{item.chnId+1}}
						<text v-if="localeLang==='en'">&nbsp;</text>
						<view style="display: inline-block;">
							<text v-if="item.chnId==0">{{$t('JLink.order.list.message.channel')}}</text>
							<text v-else>{{$t('JLink.order.list.message.channels')}}</text>
						</view>
					</view>
					<view class="text-sm">
						<!-- 已购买 -->
						<view v-if="item.expireTime.time" class=" text-gray">
							<view>
								<!-- 已到期，点击续费 -->
								<text v-if="item.expireTime.color==='reds'" class="text-reds">{{$t('JLink.deviceMessage.expire')}}</text>
								<!-- 正常使用 -->
								<text v-else class="text-primary">{{$t('JLink.deviceMessage.inNormal')}}</text>
							</view>
							<view>{{$t('JLink.publicText.expiration')}}:{{item.expireTime.time}}</view>
						</view>
						<!-- 未开通 -->
						<view v-else class="text-gray">{{$t('JLink.deviceMessage.unBuy')}}</view>
					</view>
				</view>
				<view class="action">
					<view v-if="item.expireTime.time">
						<!-- 续费 -->
						<button v-if="item.expireTime.color=='reds'" class="cu-btn round line-red text-sm">{{$t('JLink.publicText.renewal')}}</button>
						<!-- 云回放 -->
						<button v-else class="cu-btn round line-primary text-sm"  @tap.stop="cloudPlayback(item.chnId)">{{$t('JLink.deviceMessage.yun')}}</button>
					</view>
					<view v-else>
						<!-- 去开通 -->
						<button class="cu-btn round line-black text-sm">{{$t('JLink.deviceMessage.open')}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view style="height:160upx"></view>
	<!-- 云存储最大支持路数 -->
	<view class="padding-tb text-grey bg-white jf-foot text-center">{{$t('JLink.deviceMessage.channels.inform')}} ({{message['xmc.css.maxchannel']}})</view>
  </view>	
</template>

<script>
export default {
  data() {
    return {
     	message:{},//内容
		urlPrams:{//url参数
			classifyId:'',
			sn:''
		},
		localeLang:''
    }
  },
  onLoad(e) {
    const {deviceMessage,classifyId,sn} = e;
	this.urlPrams = {
		classifyId,
		sn
	}
	this.message = JSON.parse(deviceMessage);
  },
  onShow() {
	
  },
  methods: {
	jumpBuy (item){
		uni.hideToast();
		const { chnId, expireTime} = item;
		const { classifyId, sn } = this.urlPrams;
		const {normalUseChannel} = this.message;
		let maxChannel = this.message['xmc.css.maxchannel'];//云存储能使用的最大通道数
		let jumpUrl = ()=> this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}&channel=${chnId}`);
		if(normalUseChannel>=maxChannel){//使用中的通道数大于等于最大通道数
			if(expireTime.time&&expireTime.color!='reds'){
				jumpUrl();
			}else{
				uni.showToast({
					title: this.$t('JLink.deviceMessage.channels.introduce'),
					icon:'none'
				});
			}
		}else{
			jumpUrl();
		}
	}
  }
}
</script>

<style>
</style>
